<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FoodKa</title>
    <!--fivicon icon-->
    <link rel="icon" href="assets/img/fevicon.png">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/magnific.min.css">
    <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
    <link rel="stylesheet" href="assets/css/nice-select.min.css">
    <link rel="stylesheet" href="assets/css/owl.min.css">
    <link rel="stylesheet" href="assets/css/slick-slide.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/remixicon/remixicon.css">
    <link rel="stylesheet" href="assets/css/font_3780032_60lycre20q/iconfont.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/comments.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Bebas+Neue&family=Satisfy&family=Quattrocento:wght@400;700&display=swap"
          rel="stylesheet">

    <style>
        .userphone {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }

        .userphone img {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }

        .user_data {
            display: none;
            position: absolute;
            text-align: left;
            width: 210px;
            margin: 0;
            padding: 0;
            list-style: none;
            left: 0;
            top: 100%;
            background-color: #fff;
            border-radius: 0;
        }

        .userphone:hover .user_data {
            display: inline-block;
        }

        .user_data:hover {
            display: inline-block;
        }

        .user_data div {
            margin-left: 5px;
            display: block;
            margin-left: 0;
            line-height: 22px;
            font-size: 15px;
            border-bottom: 1px solid #f5f5f5;
            color: #050a30;
            font-weight: 500;
            height: 40px;
        }

        .teet {
            display: block;
            padding: 10px 20px;
            color: #050a30;
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }

        #userName {
            position: relative;
            right: 320px;
            top: -50px;
        }

        /*#container {*/
        /*    position: absolute;*/
        /*    width: 200px;*/
        /*    height: 800px;*/
        /*    top: 900px;*/
        /*    right: 60px;*/
        /*}*/

        #modify{
            display: none;
            width: 800px;
            height: 115px;
            /*border: red 1px solid;*/
            position: absolute;
            top: 132px;
            left: -100px;
            background-color: white;
        }
    </style>
    <script>
        $(function () {
            let url = location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {
                let str = url.substr(1);
                strs = str.split("&");
                foodId = decodeURIComponent(strs[1].split("=")[1].replace("foodId=", ""));
                typeId = decodeURIComponent(strs[2].split("=")[1].replace("typeId=", ""));
                pageIndex = decodeURIComponent(strs[3].split("=")[1].replace("pageIndex=", ""));
                console.log(foodId)
                $("#foodId").attr("value", foodId);
                $("#typeId").attr("value", typeId);
                $("#pageIndex").attr("value", pageIndex);
                $("#foodId1").attr("value", foodId);
                $("#typeId1").attr("value", typeId);
                $("#pageIndex1").attr("value", pageIndex);
            }
        })
    </script>
</head>
<body style="background: #fff;" class='sc5'>
<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="preloader-inner">
        <div id="wave1">
        </div>
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->
<!-- search popup area start -->
<div class="body-overlay" id="body-overlay"></div>
<div class="td-search-popup" id="td-search-popup">
    <form action="index.jsp" class="search-form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search.....">
        </div>
        <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
    </form>
</div>
<!-- //. search Popup -->

<!-- navbar start -->
<header class="navbar-area">
    <nav class="navbar navbar-expand-lg">
        <div class="container nav-container">
            <div class="responsive-mobile-menu">
                <button class="menu toggle-btn d-block d-lg-none" data-target="#themefie_main_menu"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-left"></span>
                    <span class="icon-right"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="themefie_main_menu">
                <ul class="navbar-nav menu-open">
                    <li class="current-menu-item menu-item-has-children">
                        <a href="home-1.jsp">HOME</a>
                        <ul class="sub-menu ps-0">
                            <li><a href="home-1.jsp">Home 01</a></li>
                        </ul>
                    </li>
                    <li class="current-menu-item menu-item-has-children">
                        <a href="#">页面</a>
                        <ul class="sub-menu ps-0">
                            <li><a href="about.jsp">关于</a></li>
                            <li><a href="blog.jsp">博客</a></li>
                            <li><a href="blog-details.jsp">博客详细信息</a></li>
                            <li><a href="/foods.let?type=findall">菜单</a></li>
                            <li><a href="menu-list.jsp">菜单列表</a></li>
                            <li><a href="shop.jsp">店铺</a></li>
                            <li><a href="single-product.jsp">商店详细信息</a></li>
                            <li><a href="cart.jsp" onclick="jiaru()">购物车</a></li>
                            <li><a href="checkout.jsp">Checkout</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="about.jsp">关于我们</a>
                    </li>
                    <li>
                        <a href="contact.jsp">联系人</a>
                    </li>
                </ul>
            </div>
            <div class="logo">
                <a class="main-logo" href="home-1.jsp"><img src="${pageContext.request.contextPath}/assets/img/logo.png"
                                                            alt="img"></a>
            </div>
            <div class="nav-right-part nav-right-part-mobile">
                <ul>
                    <li><a class="search" href="#"><i class="ri-search-line"></i></a>
                    </li>
                    <li class="phone-contact d-md-block d-none"><i class="ri-phone-fill float-start"></i> +997 509 153
                        849
                    </li>
                    <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                    <li class="userphone">

                    </li>
                </ul>
            </div>
            <div class="nav-right-part nav-right-part-desktop">
                <ul>
                    <li><a class="search" href="#"><i class="ri-search-line"></i></a>
                    </li>
                    <li class="phone-contact"><i class="ri-phone-fill float-start"></i> +997 509 153 849
                    </li>
                    <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                    <li class="userphone">
                        <c:if test="${user==null||user.id==-1}">
                        <a href="login.jsp">
                            <img src="${pageContext.request.contextPath}/assets/img/img.png">
                        </c:if>
                        <c:if test="${user!=null&&user.id!=-1}">
                            <img src="${pageContext.request.contextPath}${user.image}">
                            <div class="user_data">
                                <div><a href="#" class="teet">余额</a></div>
                                <div><a href="#" class="teet">设置</a></div>
                                <div><a href="PersonalCenter/main.jsp" class="teet">个人中心</a></div>
                                <div><a href="#" class="teet">退出</a></div>
                            </div>
                        </c:if>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<!-- navbar end -->

<!-- shop-details Area Start-->
<div class="shop-details-area pd-top-100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="sticy-product">
                    <div class="product-thumbnail-wrapper">
                        <c:forEach items="${food}" var="food">
                        <div class="single-thumbnail-slider">
                            <div class="slider-item">
                                <img src="${food.photo}" alt="item">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="shop-item-details">
                    <nav>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="home.html">Home</a></li>
                            <li class="breadcrumb-item"><a href="shop.jsp">店铺</a></li>
                            <li class="breadcrumb-item active" aria-current="page">商店详细信息</li>
                        </ul>
                    </nav>
                    <h2 class="entry-title">${food.name}</h2>
                    <div class="row">
                        <div class="col-lg-6 order-lg-last align-self-center">
                            <div class="rating text-lg-end">
                                4.9
                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                <c:forEach var="likenumber" items="${likenumber}">
                                    <c:if test="${likenumber!=null}">
                                        (${likenumber.like})
                                    </c:if>
                                    <c:if test="${likenumber.length==0}">
                                        (0)
                                    </c:if>
                                </c:forEach>
                            </div>
                        </div>
                        <div class="col-lg-6 align-self-center">
                            <h4 class="price" id="price">$${food.price}</h4>
                        </div>
                    </div>
                    <p class="mt-4">${food.describe}</p>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="variation" id="variation">
                                <h6>请选择尺寸</h6>
                                <select class="single-select" value="0" id="single" name="size">
                                    <option value="0">小"</option>
                                    <option value="4">中"</option>
                                    <option value="8">大"</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <script>

                        $(function () {
                            let number = parseInt($("#num").val());
                            $("#quantity2").click(function () {
                                number--;
                                if (number == 0) {
                                    number = 1;
                                }
                                let single = $("#single").val();
                                let customerId = parseInt(${food.price});
                                customerId = (customerId + parseInt(single)) * parseInt(number);
                                $("#price").text("$" + customerId);
                            })
                            $("#quantity3").click(function () {
                                number++;
                                let single = $("#single").val();
                                let customerId = parseInt(${food.price});
                                customerId = (customerId + parseInt(single)) * number;
                                $("#price").text("$" + customerId);

                            })

                            $("#variation").hover(function () {
                                let single = $("#single").val();
                                let customerId = parseInt(${food.price});
                                customerId = (customerId + parseInt(single)) * number;
                                $("#price").text("$" + customerId);

                            })

                        })
                    </script>


                    <form>
                        <div class="quantity buttons_added">
                            <input type="button" value="-" class="minus" id="quantity2">
                            <input type="number" class="input-text qty text" step="1" min="1" max="10000" id="num"
                                   value="1" name="number">
                            <input type="button" value="+" class="plus" id="quantity3">
                        </div>
                        <a class="btn btn-secondary" id="btha">添加到购物车</a>
                    </form>

                    <script>
                        $("#btha").click(function () {
                            let size = $("#single").val();
                            let number = $("#num").val();
                            location.href = "foods.let?type=cart&userId=${user.id}&foodId=${food.ID}&price=${food.price}&size=" + size + "&number=" + number
                        })
                    </script>

                    <ul class="cat">
                        <li> SKU: PZ2866</li>
                        <li>分类: <a href="#">披萨</a></li>
                        <li>标签: <a href="#">Boscaiola,</a><a href="#">披萨</a></li>
                    </ul>
                    <div class="shop-tabs">
                        <div id="container" class="hiddenComment">
                            <div class="comment-send">
                                <form id="commentForm" action="/comment.let?type=addComment" method="post" style="border-bottom: none">
                                    <span class="comment-avatar">
                                        <img id="imgPic" src="${user.image}" alt="avatar">
                                        <input type="hidden" class="form-control" name="userID" value="${user.id}">
                                        <input type="hidden" ID="foodId" class="form-control" name="foodID">
                                        <input type="hidden" ID="typeId" class="form-control" name="typeID">
                                        <input type="hidden" ID="pageIndex" class="form-control" name="pageIndex">
                                    </span>
                                    <textarea class="comment-send-input" name="comment" form="commentForm" cols="80"
                                              rows="5" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
                                    <input class="comment-send-button" type="submit" value="发表评论">
                                </form>
                            </div>
                            <div class="comment-list" id="commentList">
                                <c:forEach items="${comments}" var="c">
                                    <div class="comment">
                                            <span class="comment-avatar">
                                                <img src="${c.image}" alt="avatar">
                                            </span>
                                        <div class="comment-content">
                                            <p class="comment-content-name">${c.name}</p>
                                            <p class="comment-content-article">${c.comment}</p>
                                            <p class="comment-content-footer">
                                                <span class="comment-content-footer-device">${c.address}</span>
                                                <span class="comment-content-footer-timestamp">${c.created_time}</span>
                                                <c:if test="${c.customer_id==user.id}">
                                                <span class="comment-content-footer-timestamp"><a href="/comment.let?type=deleteComment&foodId=${param.foodId}&typeId=${param.typeId}&pageIndex=${param.pageIndex}&commentId=${c.id}">删除</a></span>
                                                </c:if>
                                                <c:if test="${c.customer_id==user.id}">
                                                <span class="comment-content-footer-timestamp"><a href="javascript:;" id="modifyComment" onclick="modifyComment(${c.id},'${c.comment}')">修改评论</a></span>
                                                </c:if>
                                            </p>
                                        </div>
                                        <div class="cls"></div>
                                    </div>
                                </c:forEach>
                            </div>
                                    <div id="modify">
                                        <a href="javascript:;" id="close" onclick="closeComment()"><img src="assets/img/img_3.png"></a>
                                        <form  id="commentForm1" action="/comment.let?type=modifyComment" method="post" style="border-bottom: none">
                                            <span class="comment-avatar">
                                                <img  src="${user.image}" alt="avatar" style="position: absolute;left: 100px;top: 25px;">
                                                <input type="hidden" class="form-control" name="userID" value="${user.id}">
                                                <input type="hidden" ID="foodId1" class="form-control" name="foodID">
                                                <input type="hidden" ID="typeId1" class="form-control" name="typeID">
                                                <input type="hidden" ID="pageIndex1" class="form-control" name="pageIndex">
                                                <input type="hidden" ID="commentId" class="form-control" name="commentId" value="">
                                            </span>
                                            <p class="comment-content-article" id="oComment" style="position: absolute;top: 10px;left: 100px;"></p>
                                            <textarea class="comment-send-input" name="comment" form="commentForm1" cols="80"
                                                      rows="5" style="top: 40px;left: 100px;" placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。"></textarea>
                                            <input class="comment-send-button" style="top: 40px;right: 14px;" type="submit" value="发表评论">
                                        </form>
                                    </div>
                                    <script>
                                        let close=document.querySelectorAll("#close")
                                        let modify=document.querySelectorAll("#modify")
                                        function modifyComment(id,comment) {
                                            let commentId=id
                                            let oComment=comment
                                            $("#commentId").attr("value", commentId);
                                            $("#oComment").html(oComment)
                                            $("#modify").css("display","block")
                                        }
                                        function closeComment() {
                                            $("#modify").css("display","none")
                                        }

                                    </script>
                            <div class="col-12">
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="foods.let?type=findId&pageIndex=${param.pageIndex-1}&foodId=${param.foodId}&typeId=${param.typeId}">
                                                <i class="ri-arrow-left-s-line"></i>
                                            </a>
                                        </li>
                                            <c:forEach var="i" begin="1" end="${pageCount}" step="1">
                                                <c:if test="${i==param.pageIndex}">
                                                    <li class="page-item  active">
                                                        <a class="page-link" href="foods.let?type=findId&pageIndex=${i}&foodId=${param.foodId}&typeId=${param.typeId}">${i}</a>
                                                    </li>
                                                </c:if>
                                                <c:if test="${i!=param.pageIndex}">
                                                    <li class="page-item">
                                                        <a class="page-link" href="foods.let?type=findId&pageIndex=${i}&foodId=${param.foodId}&typeId=${param.typeId}">${i}</a>
                                                    </li>
                                                </c:if>
                                            </c:forEach>
                                        <li class="page-item">
                                            <a class="page-link" href="foods.let?type=findId&pageIndex=${param.pageIndex+1}&foodId=${param.foodId}&typeId=${param.typeId}">
                                                <i class="ri-arrow-right-s-line"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>



                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                        aria-selected="true">Description
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-profile" type="button" role="tab"
                                        aria-controls="pills-profile" aria-selected="false">Additional information
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-contact" type="button" role="tab"
                                        aria-controls="pills-contact" aria-selected="false">Reviews (1)
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                 aria-labelledby="pills-home-tab">
                                <p class="mb-4">
                                    披萨，源自意大利的菜肴，由扁平的面包面团组成，上面放有橄榄油、牛至、西红柿、橄榄、马苏里拉或其他奶酪以及许多其他成分的组合，快速烘烤，通常在商业环境中，使用加热到很高温度的木质烤炉，然后热食。</p>
                                <div class="row">
                                    <div class="col-6">
                                        <img class="w-100" src="assets/img/blog/single-2.png" alt="img">
                                    </div>
                                    <div class="col-6">
                                        <img class="w-100" src="assets/img/blog/single-3.png" alt="img">
                                    </div>
                                </div>
                                <p class="mt-4">
                                    最简单和最传统的披萨之一是玛格丽特披萨，上面有西红柿或番茄酱、马苏里拉奶酪和罗勒。民间传说它是以翁贝托一世的妻子玛格丽特女王命名的，据说她喜欢其温和的新鲜味道，并且还注意到其顶部的颜色--绿色、白色和红色--是意大利国旗的颜色。</p>
                            </div>
                            <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                                 aria-labelledby="pills-profile-tab">
                                <h6 class="title">About Product</h6>
                                <p class="mb-0">Lorem Ipsum是印刷和排版行业的假文本。自15世纪以来，Lorem
                                    Ipsum一直是该行业的标准假文本，当时一位不知名的印刷商拿着一版印刷品争先恐后地制作了一本字体标本。它不仅经历了五个世纪，而且还经历了电子排版的飞跃，基本上没有改变。</p>
                                <p>它在20世纪60年代随着包含Lorem Ipsum段落的Letraset文件的发布而流行起来，最近，Aldus PageMaker等桌面出版软件也包含了Lorem
                                    Ipsum的版本。</p>
                                <div class="quick-view mt-4">
                                    <h6 class="title mb-4">快速浏览</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="single-about-wrap style-2">
                                                <img src="assets/img/icon/1.png" alt="img">
                                                新鲜食品
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="single-about-wrap style-2">
                                                <img src="assets/img/icon/2.png" alt="img">
                                                快速交付
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="single-about-wrap style-2">
                                                <img src="assets/img/icon/3.png" alt="img">
                                                质量保持
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="single-about-wrap style-2">
                                                <img src="assets/img/icon/4.png" alt="img">
                                                全天候服务
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                                 aria-labelledby="pills-contact-tab">
                                <div class="comment-area">
                                    <div class="media">
                                        <div class="media-left">
                                            <img src="assets/img/blog/comment.png" alt="img">
                                        </div>
                                        <div class="media-body">
                                            <h6>哈斯利达-赫里斯</h6>
                                            <span>2020年2月20日下午4:00</span>
                                            <p>
                                                在此，我想说的是："如果你是一个人，那么你就应该去做你想做的事，而不是去做你想做的事"。在这里，我想说的是，我的孩子们，你们的孩子们，你们的孩子们，你们的孩子们，你们的孩子们......。在这里，我们可以看到，在我们的生活中，有很多人都在为我们的生活而努力，有很多人都在为我们的生活而努力，有很多人都在为我们的生活而努力。</p>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
</c:forEach>
<!-- shop-details Area End -->

<!-- related-product Area Start-->
<section class="related-product-area pd-top-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="section-title mb-0">
                    <h2 class="title">相关产品</h2>
                </div>
                <div class="related-product-slider owl-carousel style-2" id="foodsWrap">

                    <c:forEach items="${liketype}" var="liketype">
                        <div class="item">
                            <div class="single-item-wrap">
                                <div class="thumb" id="thumb">
                                    <img src="${liketype.photo}  " alt="img">
                                    <c:set var="bian" value="0"/>
                                    <c:forEach items="${loves}" var="love">

                                        <c:if test="${love.customer_id == user.id && love.food_id == liketype.ID}">
                                            <c:set var="bian" value="1"/>
                                        </c:if>
                                    </c:forEach>
                                    <c:if test="${bian == '1'}">
                                        <a class="fav-btn" href="javascript:void(0)" id="${liketype.ID}">
                                            <span class="iconfont icon-aixin1"></span>
                                        </a>
                                    </c:if>
                                    <c:if test="${bian == '0'}">
                                        <a class="fav-btn" href="javascript:void(0)" id="${liketype.ID}">
                                            <span class="iconfont icon-aixin"></span>
                                        </a>
                                    </c:if>
                                </div>
                                <div class="wrap-details">
                                    <h5><a href="single-product.jsp">${liketype.name} </a></h5>
                                    <div class="wrap-footer">
                                        <div class="rating">
                                            4.9
                                            <span class="rating-inner">
                                                <i class="ri-star-fill ps-0"></i>
                                                <i class="ri-star-fill"></i>
                                                <i class="ri-star-fill"></i>
                                                <i class="ri-star-fill"></i>
                                                <i class="ri-star-half-line pe-0"></i>
                                            </span>
                                        </div>
                                        <c:forEach items="${likes}" var="l">
                                            <c:if test="${l.food_id==liketype.ID}">
                                                <p>(<span id="likeNum${liketype.ID}">${l.like}</span>)</p>
                                            </c:if>
                                        </c:forEach>
                                    </div>
                                </div>
                                <div class="btn-area">
                                    <a class="btn btn-secondary" href="single-product.jsp">选择选项 </a>
                                </div>
                            </div>
                        </div>
                    </c:forEach>


                </div>
            </div>
        </div>
    </div>
</section>
<!-- related-product Area End -->

<!-- footer area start -->
<footer class="footer-area pd-top-100">
    <div class="footer-inner padding-top-100 padding-bottom-65">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget">
                        <div class="logo">
                            <img src="assets/img/logo.png" alt="img">
                        </div>
                        <ul class="contact_info_list">
                            <li class="single-info-item">
                                <img src="assets/img/icon/location.png" alt="icon">
                                <div class="details">
                                    4920 Trails End Road Ft 美国，佛罗里达州 33311
                                </div>
                            </li>
                            <li class="single-info-item">
                                <img src="assets/img/icon/envelope.png" alt="icon">
                                <div class="details">
                                    ordernow@foodka.com
                                </div>
                            </li>
                            <li class="single-info-item">
                                <img src="assets/img/icon/phone.png" alt="icon">
                                <div class="details">
                                    +997 509 153 849
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_link">
                        <h4 class="widget-title">热门菜单</h4>
                        <ul>
                            <li><a href="menu-list.jsp">汉堡王沃珀</a></li>
                            <li><a href="menu-list.jsp">五个家伙芝士汉堡</a></li>
                            <li><a href="menu-list.jsp">肯德基原始食谱鸡</a></li>
                            <li><a href="menu-list.jsp">温迪的霜冻</a></li>
                            <li><a href="menu-list.jsp">麦当劳的快乐餐</a></li>
                            <li><a href="menu-list.jsp">多米诺的意大利辣香肠披萨饼</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_link">
                        <h4 class="widget-title">营业时间</h4>
                        <ul>
                            <li>星期一 : 09.00am-10.00pm</li>
                            <li>星期二 : 09.00am-10.00pm</li>
                            <li>星期三 : 09.00am-10.00pm</li>
                            <li>星期四 : 09.00am-10.00pm</li>
                            <li>星期五 : 09.00am-10.00pm</li>
                            <li>星期六 & 星期天 : <span>Closed</span></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_instagram_feeds">
                        <h4 class="widget-title">Instagram提要</h4>
                        <ul>
                            <li><a href="#"><img src="assets/img/instagram/1.png" alt="instagram"/></a></li>
                            <li><a href="#"><img src="assets/img/instagram/2.png" alt="instagram"/></a></li>
                            <li><a href="#"><img src="assets/img/instagram/3.png" alt="instagram"/></a></li>
                            <li><a href="#"><img src="assets/img/instagram/4.png" alt="instagram"/></a></li>
                            <li><a href="#"><img src="assets/img/instagram/5.png" alt="instagram"/></a></li>
                            <li><a href="#"><img src="assets/img/instagram/6.png" alt="instagram"/></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-md-start text-center">
                    <div class="copyright-area">
                        <p>© 2021年Foodka。Themefie保留所有权利</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <ul class="social-area text-md-end text-center mt-md-0 mt-2">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-behance"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer area end -->

<!-- back-to-top end -->
<div class="back-to-top">
    <span class="back-top"><i class="fas fa-angle-double-up"></i></span>
</div>


<!-- all plugins here -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.3.6.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/imageloded.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/counterup.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/waypoint.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/magnific.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/isotope.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/nice-select.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/fontawesome.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/owl.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/slick-slider.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/tweenmax.min.js"></script>
<!-- main js  -->
<script  src="assets/js/main.js"></script>
</body>
<script>

    $(function () {

        $("#foodsWrap").on("click", "div div div#thumb a", function () {

            let foodId = $(this).prop("id")
            let customerId = ${user.id};
            let spanId = "#" + foodId + " span"
            let like = "#likeNum" + foodId;
            let rating = "#rating" + foodId;
            let ratingP = "#rating" + foodId + " p";
            $.ajax({
                url: "${pageContext.request.contextPath}/foods.let?type=foodGiveLike",
                type: "post",
                data: {
                    customerId: customerId,
                    foodId: foodId
                },
                success: function (data) {
                    if (data === "yes") {
                        $(spanId).attr("class", "iconfont icon-aixin1");
                        if ($(like).length > 0) {
                            let likeNum = parseInt($(like).text())
                            $(like).html(likeNum + 1)
                        } else {
                            $(rating).append("<p>(<span id='temp'>1</span>)</p>")
                            $("#temp").attr("id", like)
                        }
                    } else {
                        $(spanId).attr("class", "iconfont icon-aixin")
                        if ($(like).length > 0) {
                            let likeNum = parseInt($(like).text())
                            $(like).html(likeNum - 1)
                        } else {
                            $(ratingP).remove()
                        }
                    }

                }
            })


        })
    })
</script>
</html>